<template>
    <div class="container-grid">
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :btnsData="{ permissionsData }"  @search="onQueryTreeClick"></ux-header-search>
        <vxe-grid ref="xTree" row-id="section_sn" v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
            <template v-slot:operate="{ row }">
                <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
            </template>
        </vxe-grid>
        <dialogForm ref="dialogForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogForm>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinTableTreeStore } from "@/mixin/table/TreeStore";
import { mixinAccess } from "@/mixin/Access";
import { mixinTableOperation } from "@/mixin/table/Operation";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import dialogForm from "./Edit.vue";
@Component({
    name: "parkOrgHome",
    mixins: [
        mixinTableTreeStore,
        mixinAccess,
        mixinDialogFormParent,
        mixinTableOperation
    ],
    components: {
        dialogForm
    }
})
export default class purviewDepartmentHome extends Vue {
    @Action("parkOrg/tree") getTree: any;
    @Action("parkOrg/del") itemDel: any;
    @Getter("parkOrg/tree") treeData: any;
    treeQueryConfig: object = {
        id: "section_sn"
    };
    // 列表配置
    table: any = {
        btns: [
            {
                label: "编辑",
                condition: ["permissionsData.edit"],
                handleClick: (this as any).onEditClick
            },
            {
                label: "删除",
                condition: ["permissionsData.del"],
                handleClick: (this as any).onDelClick
            }
        ],
        // 字段配置
        columns: [
            {
                field: "section_name",
                title: "组织名称",
                treeNode: true,
                align: "left",
                minWidth: 150
            },
            { field: "section_tel", title: "组织电话", minWidth: 150 },
            { field: "section_pname", title: "上级组织", minWidth: 150 },
            { title: "创建时间", field: "created_at" },
            {
                showOverflow: "ellipsis",
                fixed: "right",
                title: "操作",
                slots: { default: "operate" },
                width: 130
            }
        ]
    };

    // 查询头配置
    enquiryData: any = {
        fields: [
            {

                field: "section_name",
                label: "组织名称"
            }
        ],
        btns: [
            {
                label: "新增",
                class: "btn-blue",
                icon: "el-icon-plus",
                condition: ["permissionsData.add"],
                handleClick: (this as any).onAddClick
            }
        ]
    };
}
</script>
